@charset "utf-8";html{overflow-x:hidden}
body{color:#333;font:14px "Microsoft Yahei"}
body,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,span,ul{margin:0;padding:0;list-style:none}
a{color:#333;text-decoration:none}
a:focus{outline:0}
img{border:none}
.vam{vertical-align:middle}
.clear{clear:both;height:0;line-height:0;font-size:0}
p{word-spacing:0}
em,i{font-style:normal}
.tr{text-align:right}
.tl{text-align:left}
.center{text-align:center}
.fl{float:left}
.fr{float:right}
.pa{position:absolute}
.pr{position:relative}
.clearfix:after{content:"";height:0;clear:both;display:block;visibility:hidden}
.clearfix{zoom:1}
.content{width:1200px;margin:0 auto}
.pic{width:100%;overflow: hidden;}
.pic img{-o-transition:all 1s linear 0s;transition:all 1s linear 0s}
.pic:hover img{-webkit-transform:scale(1.05) rotate(0) translateY(0);-ms-transform:scale(1.05) rotate(0) translateY(0);transform:scale(1.05) rotate(0) translateY(0)}
.white,.whites{position:relative;overflow:hidden}
.white:after,.whites:after{content:'';cursor:pointer;position:absolute;left:-100%;top:0;width:100%;height:100%;background-image:-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));background-image:-webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:skewx(-25deg)}
.white:hover:after{left:100%;-moz-transition:1s;-o-transition:1s;-webkit-transition:1s;transition:1s}
.whites:hover:after{left:100%;-moz-transition:.5s;-o-transition:.5s;-webkit-transition:.5s;transition:.5s}
body{min-width:1200px;width:100%;max-width:1920px;margin:0 auto;overflow-x:hidden}
em,i{font-style:normal}
.content{width:1200px;margin:0 auto}
input::-webkit-input-placeholder{color:#999;font-size:14px;text-transform:capitalize}
input::-moz-placeholder{color:#999;font-size:14px;text-transform:capitalize}
input:-moz-placeholder{color:#999;font-size:14px;text-transform:capitalize}
input:-ms-input-placeholder{color:#999;font-size:14px;text-transform:capitalize}
@keyframes myfirst{0%{background-position:0 bottom}
100%{background-position:100% bottom}
}
.line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clear{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}


.banner{height:auto;max-width:1920px;margin:0 auto!important;position:relative;margin-top:-34px}
.banner .bd li{float:left;width:100%;line-height:0}
.banner .bd li img{width:100%}
.banner .bd li a{display:block}
.banner .hd{z-index:1;margin:0 auto;text-align:center;position:absolute;left:0;width:100%;bottom:8%;cursor:pointer}
.banner .hd li{width:13px;height:13px;background:#fff;display:inline-block;margin:0 10px;border-radius:13px}
.banner .hd li.on{background:#0066cc}
.banner .prev{position:absolute;font-size:0;left:0;opacity:0;top:50%;transform:translateY(-50%);z-index:10;transition:all .5s;cursor:pointer;}
.banner .next{position:absolute;font-size:0;right:0;opacity:0;top:50%;transform:translateY(-50%);z-index:10;transition:all .5s;cursor:pointer;}
.banner:hover .prev{left:5%;opacity:1}
.banner:hover .next{right:5%;opacity:1}


.tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;}
.tit span{display:block;font-size: 44px;color: #333333;line-height:44px;font-weight: bold;}
.tit span b{ color: #0066cc; }
.tit i{display:block;font-size: 22px;line-height:40px;color: #999999;margin: 12px auto 0;width: 881px;height: 24px;font-family: Arial;background: url(img/tit_bg.png) no-repeat center;}

.search{height:60px;}
.search p{float: left;height: 60px;line-height: 60px;font-size: 14px;color: #999999;}
.search p b{ font-weight: normal;color: #333333; }
.search p a{color: #999999;margin-right: 9px;}
.search p a:hover{color: #0066cc;}
.s_box{float:right;width:280px;height:32px;background:#eee;margin-top:16px;border-radius:16px;position:relative}
.s_box .input1{width:190px;height:32px;line-height:32px;color:#999;border:0;background:0;border-right:0;padding:0 20px;border-top-left-radius:16px;border-bottom-left-radius:16px;float:left;outline: 0;}
.s_box .input2{width:16px;height:16px;border:0;background:url(img/sea.png) no-repeat center;    color: #0000;float:right;position:relative;z-index:2;cursor:pointer;margin-right:24px;margin-top:8px}

.yz{padding: 80px 0 80px;background: #f7f7f7;}
.yz .tit i{ font-size: 14px;line-height:32px; }
.yz_con{ margin-top: 40px; }
.yz_l{ float: left;width: 120px; }
.yz_l h3{ display: block;width: 120px;height: 132px;background: #0066cc; }
.yz_l h3 em{ padding-left: 16px;display: block;font-size: 25px;color: #fff;font-weight: bold;line-height: 30px;padding-top: 12px;text-transform: uppercase;  }
.yz_l h3 em b{ display: block;font-size: 40px;line-height: 40px;color: #fff;text-transform: uppercase; }
.yz_l h3 i{ display: block;width: 108px;height: 40px;line-height: 40px;margin: 10px auto 0;border-top: 1px solid rgba(255,255,255,0.4);font-size: 20px;color: #ffffff;text-align: center;font-weight: normal; }
.yz_l ul{ width: 120px;height: 369px;background: #fff; }
.yz_l ul li{ width: 120px;height: 123px;padding-top: 27px;box-sizing: border-box; }
.yz_l ul li em{ display: block;width: 40px;height: 40px;overflow: hidden;border-radius: 20px;background: #e5e5e5;margin: 0 auto; }
.yz_l ul li em img{ display: block;width: 40px;height: 40px; transition: all 0.5s;}
.yz_l ul li span{ display: block;font-size: 16px;line-height: 16px;color: #333333;text-align: center;padding-top: 12px; }
.yz_l ul li.cur em{ background: #f4cd01; }
.yz_l ul li.cur em img:nth-child(1){ margin-top: -40px; }
.yz_l ul li.cur span{font-weight: bold; }


.yz_r{ float: right;width: 1048px; }
.yz_r dt { display: block; width: 590px;height: 353px;overflow: hidden;float: left;}
.yz_r dt img{ display: block;width: 590px;height: 353px;transition: all 0.5s; }
.yz_r dd{ float: right;width: 458px;height: 353px;background: #fff;padding: 65px 45px 0 55px;box-sizing: border-box;}
.yz_r dd h4{ display: block;font-weight: bold;color: #333;font-size: 28px;line-height: 40px; }
.yz_r dd h4 em{ display: block;font-weight: normal;color: #333; }
.yz_r dd p{ color: #666666;font-size: 16px;line-height: 28px; height: 104px;padding-top: 40px;}
.yz_r  .more{display: block;width: 125px;height: 32px;line-height: 32px;text-align: center;font-size: 16px;color: #fff;background: #fffefe;}


.yz_t{height: 148px;border-bottom: 1px solid #dddddd;box-sizing: border-box;padding-top: 32px;box-sizing: border-box; }
.yz_t ul li{ float: left;padding: 0 32px 0 35px; color: #333;box-sizing: border-box;position: relative;transition: all 0.5s;font-size: 40px;font-weight: bold;line-height: 40px;}
.yz_t ul li:last-child{ padding-right: 0; }
.yz_t li em{ display: block;height: 60px; text-align: center;transition: all 0.5s;}
.yz_t li em b{color: #333333;  font-weight: normal;display: inline-block;font-size: 48px;line-height: 48px;transition:all 0.3s;font-weight: bold;transition: all 0.5s;}
.yz_t li em i{ display: inline-block;width: 24px;height: 24px;border-radius: 18px;background: #999;font-size: 16px;color: #fff;text-align: center;line-height: 24px;margin-left: 5px;vertical-align: top;transition: all 0.5s; font-weight: normal;}
.yz_t li h3{font-size: 16px; color: #666666; line-height: 16px; font-weight: normal;}
.yz_t li:hover{ transform:translateY(-5px); }


.td{height: 751px;padding-top: 80px;box-sizing: border-box;background: url(img/td_bg.jpg) no-repeat center;}
.td_con{margin-top: 78px;}
.td_con dl{float: left;width: 176px;margin-right: 9px;position: relative;transition: all 0.5s;overflow: hidden;}
.td_con dl:after{ position:absolute;left:0;bottom:5px;content:"";background: url(img/td_dd.png) no-repeat center;width: 176px;height:419px;}
.td_con dl.cur:after{ background:0;}
.td_con dt{ position: relative;}
.td_con dt em{ position: absolute;left:0;bottom:36px;width: 176px;z-index:10; }
.td_con dt em>img{ display: block;width: 48px;height: 48px;margin: 0 auto; }
.td_con dt em span{ display: block;font-size: 24px;color: #ffffff;line-height: 24px;text-align: center;padding-top: 24px; }
.td_con dt em span i{ display: block;font-size: 12px;color: #ffffff;line-height: 12px;text-align: center;opacity: 0.5;font-family: Arial;padding-top: 10px; }
.td_con dl.cur dt{  display: block;width:624px;height: 420px; overflow: hidden;}
.td_con dl.cur dt em{ display: none; }
.td_con dl.cur dt img{ display: block;width:624px;height: 420px;  }

.td_con dl:last-child{ margin-right: 0; }
.td_con dl.cur{ width: 624px; margin-top: -40px;}
.td_con dl dd{ display: none; }
.td_con dl.cur dd{ padding-top: 30px; display: block;}
.td_con dd h4{ display: block;padding-left: 18px;font-weight: normal;font-size: 24px;line-height: 24px;border-left: 4px solid #0066cc; }
.td_con dd p{ display: block;font-size: 14px;color: #333333;line-height: 14px;padding-top: 12px;opacity: 0.64; }


.pro{ padding:0 0 10px; }
.pro_t{margin: 54px 0 0;}
.pro_t li{ float: left;width: 240px;height: 180px;border:1px solid #b2b2b2;margin-bottom: -1px;overflow: hidden;margin-right: -1px;box-sizing: border-box; padding-top: 10px;position: relative;}
.pro_t li img{ display: block;width: 160px;height: 120px;margin: 0 auto; }
.pro_t li span{ display: block;font-size: 16px;color: #333333;line-height: 16px;text-align: center;padding-top: 4px; }
.pro_t li span em{ display: block;font-size: 12px;color: #999999;line-height: 12px;font-family: Arial;padding-top: 6px;text-align: center; }
.pro_t li p{ position: absolute;left:0;bottom:0;width: 240px;height: 0;transition: all 0.5s;background: rgba(0,102,204,0.7);}
.pro_t li p i{ display: block;width: 138px;height: 37px;border: 1px solid #FFFFFF;border-radius: 19px; line-height: 37px;font-size: 16px;color: #FFFEFE;text-align: center;margin: 73px auto 0;}
.pro_t li:hover p{  height: 180px;}

.pro_con{ margin-top: 12px;position: relative;}
.pro_con .tempWrap{ width: 1200px!important; }
.pro_con li{width: 291px;margin-right:12px;margin-bottom: 27px;float: left;}
.pro_con li i{ display: block;width: 291px;height:187px;overflow: hidden;position: relative;}
.pro_con li i>img{ display: block;width: 100%;}
.pro_con li span{ display: block;height: 55px;border-bottom: 1px solid #cccccc;-o-transition: all .5s ease; transition: all .5s ease; }
.pro_con li span em{ float: left;font-size: 14px;color: #1b1b1b;line-height: 55px;-o-transition: all .5s ease; transition: all .5s ease; }

.pro_con li:hover span em{margin-left: 6px; color:#0066cc;}
.pro_con li span img{float: right;margin-right: 20px;margin-top: 22px;-o-transition: all .5s ease; transition: all .5s ease; display: block;width: 22px;height: 11px;}
.pro_con li:hover span img{margin-right: 24px; }
.sprev,.snext{position: absolute;top:66px;width:56px ;height: 56px;z-index: 40;cursor: pointer;}
.sprev{left:-100px;background: url(img/sprev.png) no-repeat center;}
.snext{right:-100px;background: url(img/snext.png) no-repeat center;}


.ys{ padding: 84px 0 110px;background: #eee; }
.ys .tit i{ font-size: 14px;line-height:32px; }
.ys .tit img{ display: inline-block;margin: 0 20px;vertical-align: -5px; }
.ys_con{ margin-top: 85px; }
.ys_con li{ float: left;width: 300px;height: 424px;background: #fff;background: url(img/ys_line.png) no-repeat right 25px #fff;position: relative; }
.ys_con li:last-child{ background: #fff; }
.ys_con li p{ padding: 65px 40px 0;box-sizing: border-box; font-size: 14px;line-height: 26px;color: #666666;}
.ys_con li p>img{ display: block;width: 56px;height: 48px; }

.ys_con li p span{ display: block;font-size: 20px;color: #666666;line-height: 20px;height: 112px; }
.ys_con li p span b{ display: block;font-size: 28px;color: #333;line-height: 28px;padding: 36px 0 6px; }
.ys_con li p em{ display: block;height: 124px; }
.ys_con li i>img{ display: block;width: 32px;height: 32px; }
.ys_con li div{ display: none; transition: all 0.5s ease;}
.ys_con li.cur p{ display: none; }
.ys_con li.cur div{ position: absolute;display: block;width:315px;height: 476px;left:-7px;top:-26px;z-index: 10;  }
.ys_con li.cur div:after{background: url(img/ys_dd.png) no-repeat center; width:315px;height: 476px;left:0px;top:0;z-index: 20;content: "";position: absolute; }
.ys_con li.cur div>img{ width:315px;height: 476px; }
.ys_con li.cur div i{position: absolute;left:0;bottom:42px;padding: 0 35px;z-index: 30;display: block;}
.ys_con li.cur div strong{ display: block;float: left; }
.ys_con li.cur div span{ display: block;font-size: 20px;color: #fff;line-height: 20px;height: 80px; }
.ys_con li.cur div span b{ display: block;font-size: 28px;color: #fff;line-height: 28px;padding: 0 0 6px; }
.ys_con li.cur div span>img{ display: block;width: 56px;height: 48px;float: right; }
.ys_con li.cur div em{ display: block;font-size: 14px;color: #fff;line-height: 26px;opacity: 0.61;}

.fw{ padding: 100px 0; }
.fw dl{ margin-top: 45px;height: 600px;border-bottom: 1px solid #ebebeb; }
.fw dt{ display: block;float: left;width: 723px;height: 562px;margin-left: -48px; }
.fw dt img{display: block;width: 723px;height: 562px; }
.fw dd{ float: right;width: 446px; }
.fw dd h4{ padding-top: 110px;height: 90px;  }
.fw dd h4 b{ display: block;font-size: 28px;color: #0066cc;line-height: 28px;}
.fw dd h4 span{ display: block;font-size: 12px;color: #0066cc;line-height: 12px;padding: 6px 0 0;font-family: Arial; opacity: 0.65;font-weight: normal;}
.fw dd p{font-size: 16px;line-height: 30px;color: #666;height: 180px;}
.fw dd em{ display: block;font-size: 16px;color: #333333; }
.fw dd em img{ display:inline-block;width: 20px;height: 22px;margin-right: 6px; }
.fw dd em b{ display:inline-block;font-size: 24px;color: #282828; }
.fw dd .zx{ border-radius:20px;display: block;width: 150px;height: 40px;line-height: 40px;font-size: 18px;color: #fff;text-align: center;   transition: all .3s ease;background: #0066cc;margin-top: 10px;}
.fw dd .zx:hover{ transform:translateY(-5px);}
.fw ul{ margin-top: 42px; }
.fw li{ width: 200px;box-sizing: border-box;float: left;background: url(img/fw_ic.png) no-repeat right 42px;}
.fw li:last-child{ background: 0; }
.fw li em{ display: block;width: 59px;height: 59px;overflow: hidden;border-radius: 30px;background: #eeeeee;margin: 0 auto; }
.fw li em img{ display: block;width: 59px;height: 59px; transition: all 0.5s;}
.fw li span{ display: block;font-size: 18px;line-height: 18px;color: #333333;text-align: center;padding-top: 12px; }
.fw li i{ display: block;font-size: 12px;line-height: 12px;color: #999999;text-align: center;padding-top: 6px; font-family: Arial;}
.fw li:hover em{ background: #f4cd01; }
.fw li:hover span{font-weight: bold; }
.fw li:hover i{ color: #333; }
.fw li:hover:hover em {animation-duration: 2s;animation-name: flipInY;}

.coop{padding:80px 0;box-sizing: border-box; background: #e6e6e6;}
.coop_con{ margin-top: 50px;position: relative;height:341px;}
.coop_con li{position: absolute;width:161px;height: 161px;background:url(img/coop_dd.png) no-repeat center;}
.coop_con li img{ display: block;width: 90px;height: 57px;margin: 0 auto;padding-top:58px;  }
.coop_con li:nth-child(1){left:88px;top:0;}
.coop_con li:nth-child(2){left:261px;top:0;}
.coop_con li:nth-child(3){left:434px;top:0;}
.coop_con li:nth-child(4){right:434px;top:0;}
.coop_con li:nth-child(5){right:261px;top:0;}
.coop_con li:nth-child(6){right:88px;top:0;}

.coop_con li:nth-child(7){left:0;top:90px;}
.coop_con li:nth-child(8){left:173px;top:90px;}
.coop_con li:nth-child(9){left:346px;top:90px;}
.coop_con li:nth-child(10){left:519px;top:90px;}
.coop_con li:nth-child(11){right:346px;top:90px;}
.coop_con li:nth-child(12){right:173px;top:90px;}
.coop_con li:nth-child(13){right:0px;top:90px;}

.coop_con li:nth-child(14){left:88px;top:180px;}
.coop_con li:nth-child(15){left:260px;top:180px;}
.coop_con li:nth-child(16){left:433px;top:180px;}
.coop_con li:nth-child(17){right:433px;top:180px;}
.coop_con li:nth-child(18){right:260px;top:180px;}
.coop_con li:nth-child(19){right:88px;top:180px;}

.coop em{ display: block;font-size: 16px;color: #333333; text-align: center;padding-top: 48px;}
.coop  em img{ display:inline-block;width: 20px;height: 22px;margin-right: 6px; }
.coop  em b{ display:inline-block;font-size: 24px;color: #282828; }
.coop  .zx{ display: block;width: 150px;height: 40px;line-height: 40px;font-size: 18px;color: #fff;text-align: center;   transition: all .3s ease;background: #0066cc;margin: 12px auto 0;}
.coop  .zx:hover{ transform:translateY(-5px);}

.news{padding:85px 0;box-sizing: border-box;}
.news_con{margin-top: 50px;}
.news_l{ float: left;width:570px ;}
.news_l dl{width: 570px;}
.news_l dt{ position: relative;display: block;width: 570px;height: 259px;}
.news_l dt img{ display: block;width: 570px;height: 259px;}
.news_l dd{height: 160px;padding: 0 36px;box-sizing: border-box;background: #f7f7f7;}
.news_l dd h3 a{ display: block;padding-top: 25px;font-size:18px ;color: #000000;line-height: 18px;font-weight: normal;}
.news_l dd h3 em{ display: block;font-size: 14px;color: #666666;line-height: 14px;font-family: Arial;padding-bottom: 8px; }
.news_l dd p{ display: block;padding-top: 15px;font-size:14px ;color: #999999;line-height: 22px;}
.news_l dd p a{ color: #0066cc; }
.news_l ul{ margin-top: 18px; }
.news_l li a{ height: 36px;line-height: 36px;position: relative;display: block;font-size: 16px;color: #333;}
.news_l li a em{ float: right;font-size: 14px;color: #999999;line-height: 36px;font-family: Arial;}
.news_r{ float: right;width: 570px;}
.news_l h2 a,.news_r h2 a{display: block;height: 48px;line-height: 48px;display: block;position: relative;color: #333333;font-weight: bold;font-size: 24px;}
.news_r h2 a{border-bottom: 1px solid #d2d2d2; }
.news_r h2 em{ float: right;font-size: 14px;color: #333333;font-weight: normal; }

.news1 dl{height: 132px;border-bottom: 1px dashed #cccccc;transition: all 0.5s;}
.news1 dd{ height: 132px;}
.news1 h3 a{font-size: 18px;color: #000000;line-height: 18px;padding: 30px 0 14px;font-weight: normal;display: block;transition: all 0.3s;}
.news1 p{font-size: 14px;color: #999999;line-height: 22px;width: 527px;}
.news_l li a:hover,.news_l dd h3 a:hover{ color: #0066cc; }
.news1 dl:hover{ background: #0066cc;width: 610px;padding-left: 40px;box-sizing: border-box;margin-left:-40px; ;border-bottom: 0;}
.news1 dl:hover h3 a{ color: #fff;font-weight: bold;}
.news1 dl:hover p{ color: #fff;opacity: 0.7; }




@-webkit-keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown1 { -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1 }
@-webkit-keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown2 { -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2 }
@-webkit-keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 }
@-webkit-keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2 }
@-webkit-keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 }
@-webkit-keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
@keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
.zoomLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
.zoomRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
@-webkit-keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 }
@-webkit-keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 }
@keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-moz-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-webkit-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-o-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}